<template>
  <div id="homePage">
    <!-- 用户信息展示 -->
    <div class="user-list-wrap">
      <!-- 个人信息 -->
      <div class="username_wrap">
        <p>
          小方同志
          <span>：用户昵称</span>
        </p>
        <p>
          人生如戏
          <span>：个人简介</span>
        </p>
        <p>
          <span>点赞数</span>：12 &nbsp;&nbsp;&nbsp;
          <span>浏览人数</span>：20
        </p>
      </div>
      <!-- 头像 -->
      <div class="userImage_wrap">
        <img src="../../assets/微信图片_20200704011209.jpg" alt />
      </div>
    </div>
    <div class="data-list-wrap">
      <div class="article-wrap"></div>
      <div class="personal-wrap"></div>
      <div class="works-wrap"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      circleUrl:"../../assets/微信图片_20200704011209.jpg"
    };
  },
  methods: {
    errorHandler() {
      return true;
    }
  }
};
</script>
<style lang='less'>
#homePage {
  .user-list-wrap {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    // 用户个人简介
    .username_wrap {
      width: 100%;
      p {
        font-size: 16px;
        text-align: right;
        span {
          font-size: 14px;
          color: #999;
        }
      }
    }
    // 用户头像
    .userImage_wrap {
      width: 400px;
      text-align: center;
      img{
          height: 130px;
          border-radius: 50%;
      }
    }
  }
  .data-list-wrap {
    display: flex;
    height: 500px;
    padding: 20px;
    justify-content: space-between;
    div {
      background: #ccc;
      width: 100%;
    }
  }
}
</style>